<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表单校验</title>
</head>
<body>
<div class="form-div">
  <div class="reg-content">
    <h1>欢迎注册</h1>
    <span>已有帐号？</span> <a href="#">登录</a>
  </div>
  <form id="reg-form" action="#" method="get">
    <table>
      <tr>
        <td>用户名</td>
        <td class="inputs">
          <input name="username" type="text" id="username" onblur="checkUserName()" />
          <span id="username_err" class="err_msg" style="display: none">用户名不符合要求</span>
        </td>
      </tr>

      <tr>
        <td>密码</td>
        <td class="inputs">
          <input name="password" type="password" id="password" onblur="checkPwd()" />
          <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
        </td>
      </tr>

      <tr>
        <td>手机号</td>
        <td class="inputs">
          <input name="tel" type="text" id="tel" onblur="checkPhoneNumber()" />
          <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
        </td>
      </tr>
    </table>
    <div class="buttons">
      <input value="注 册" type="submit" id="reg_btn" onsubmit="submitAll()" onclick="checkSubmit()"/>
    </div>
    <br class="clear">
  </form>
</div>

<!--JS代码 -->
<!--注册规则:
        校验用户名: 当用户输入框失去焦点时,判断输入的内容是否符合规则(长度: 6-12)
        校验密码: 判断输入的内容是否符合规则(长度: 6-12)
        校验手机号:判断输入的内容是否符合规则(长度: 11)
    -->
<script>
  function checkUserName(){
    var input = document.getElementById("username").value.trim();
    //正则表达式
    var reg = /^[a-zA-Z]\w{5,11}$/;
    var flag = reg.test(input);
    if (flag){
      document.getElementById("username_err").style.display = '';
      document.getElementById("username_err").innerText = "用户名符合要求";
    }else{
      document.getElementById("username_err").style.display = '';
      document.getElementById("username_err").innerText = "用户名不符合要求";
    }
    return flag;
  }

  function checkPwd(){
    var input = document.getElementById("password").value.trim();
    var reg = /^\w{6,12}$/;
    var flag = reg.test(input);
    if (flag){
      document.getElementById("password_err").style.display = '';
      document.getElementById("password_err").innerText = "密码符合要求";
    }else{
      document.getElementById("password_err").style.display = '';
      document.getElementById("password_err").innerText = "密码不符合要求";
    }
    return flag;
  }

  function checkPhoneNumber(){
    var input = document.getElementById("tel").value.trim();
    var reg = /^\d{11}$/;
    var flag = reg.test(input);
    if (flag){
      document.getElementById("tel_err").style.display = '';
      document.getElementById("tel_err").innerText = "手机号符合要求";
    }else{
      document.getElementById("tel_err").style.display = '';
      document.getElementById("tel_err").innerText = "手机号不符合要求";
    }
    return flag;
  }

  function submitAll(){
    var flag = (checkUserName() && checkPwd() && checkPhoneNumber());
    return flag;
  }
  function checkSubmit(){
    var flag = (checkUserName() && checkPwd() && checkPhoneNumber());
    if (flag) {
      alert("提交成功");
    }else{
      alert("提交失败");
    }
  }
</script>
</body>
</html>